<template lang="html">
  <div>
    <div class="content" :class="bg"></div>
    <footer class="footer" ref="footer">
      <div>阅读下一篇</div>
    </footer>
  </div>
</template>

<script>
import Tool from '@/assets/script/tool'
export default {
  data () {
    return {
      id: parseInt(Tool.getQueryString("id")) || 0,
      bg: ""
    }
  },
  methods: {
    next () {
      console.log(this.$router);
      window.location.href = "?id="+ (this.id++)  +"/#/test/next"
    },
    setBg () {
      let arr = ['red', 'blue', 'yellow'];
      let num = parseInt(Math.random() * 3);
      this.bg = arr[num];
    },
    swiperDown () {
      let element = this.$refs.footer;
      let x, y, X, Y, swipeX, swipeY;
      element.addEventListener('touchstart', e => {
        x = e.changedTouches[0].pageX;
        y = e.changedTouches[0].pageY;
        swipeX = true;
        swipeY = true;
      })

      element.addEventListener('touchmove', e => {
        X = e.changedTouches[0].pageX;
        Y = e.changedTouches[0].pageY;
        if (swipeY && Math.abs(Y - y) - Math.abs(X - x) > 0) {
          e.stopPropagation();
          // 下滑
          if (y - Y > 10) {
            e.preventDefault()
            this.next();
          }
          swipeX = false;
        }
        if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
          swipeY = false;
        }
      })
    }
  },
  mounted () {
    this.setBg();
    this.swiperDown();
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/default.scss";
.content {
  height: 15rem;
  // background-color: $red;
  &.red {
    background-color: $red;
  }
  &.blue {
    background-color: $blue;
  }
  &.yellow {
    background-color: $yellow;
  }
}
.footer {
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .32rem;
  color: $blue;
}
</style>
